<template>
  <div class="discounts primary-blue">
    <common-header />
    <div class="container-box">
      <product-module :lists="lists" :length="18" >
        <template v-slot:pagination>
          <common-pagination :page="page" @pageClick="pageClick" />
        </template>
      </product-module>
    </div>
    <common-footer />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import CommonHeader from "@/components/common/CommonHeader.vue";
import ProductModule from "@/components/common/ProductModule.vue";
import CommonPagination from "@/components/common/CommonPagination.vue";
import CommonFooter from "@/components/common/CommonFooter.vue";
const page = 3
const lists = ref([
  {
    poster: 'https://argos-shop-online.s3.amazonaws.com/pc/gp/B07XGP7HTW/81fwoaIeEOL._AC_SL1500_.jpg',
    price: 34.6,
    discount: 20,
    sales: 1,
    title: ' COOFANDY 男士披肩领长开衫针织荷叶边时尚毛衣垂坠斗篷 '
  }
])
const pageClick = (pageNo) => {
  console.log('oageNo', typeof pageNo)
  switch (pageNo){
    case 1:
      console.log(111)
      lists.value = [
        {
          poster: 'https://argos-shop-online.s3.amazonaws.com/pc/gp/B07XGP7HTW/81fwoaIeEOL._AC_SL1500_.jpg',
          price: 34.6,
          sales: 1,
          title: ' COOFANDY 男士披肩领长开衫针织荷叶边时尚毛衣垂坠斗篷 '
        }
      ]
        console.log(lists.value)
      break
    case 2:
      lists.value = [
        {
          poster: 'https://hetao-shop-test.s3.amazonaws.com/test/2023-03-11/a55cc43a-9a68-4311-b08a-df808fa277b4.jpg',
          price: 34.6,
          sales: 1303,
          title: ' 大声笑惊喜！闪光变色洋娃娃，带 5 个惊喜 - 收藏洋娃娃，包括闪亮的时尚配饰、节日玩具、适合 4 5 6 岁以上儿童女孩的精美礼物 '
        }
      ]
      console.log(lists.value)
      break
    case 3:
      lists.value = [
        {
          poster: 'https://argos-shop-online.s3.amazonaws.com/pachong/gaoqing/B09PG3LN7C/81QF-JBbrYL._AC_SL1500_.jpg',
          price: 34.6,
          sales: 379,
          title: ' Planner 2023-2024 - Academic Planner 2023-2024 从 2023 年 7 月到 2024 年 6 月，2023-2024 周月计划，带日历贴纸，5.75" x 8.25"，Saffiano 皮革，笔环，后袋 - 黑蜜蜂 '
        }
      ]
      break
  }
}
</script>
<style scoped>
.container-box{
  padding: 26px 0;
}
</style>
